<template>
    <!--系统设置-功能管理-->
<el-container class="system-hmax">
    <el-aside class="system-side" width="200px">
        <div class="system-title">功能结构</div>
        <div class="system-side-con">
            <el-input
            placeholder="请输入内容"
            v-model="suggest"
            size="mini"
            clearable>
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <div class="system-side-scroll">
                <el-scrollbar style="height:100%;">
                    <Menus :treeview="treeview" @choosetree="choosetree" ref="menus"></Menus>
                </el-scrollbar>                
            </div>
        </div>
        
    </el-aside>
    <el-main style="position:relative;padding-bottom:0px;">
        <div class="system-wide">
            <div class="system-title" style="margin-bottom:10px;">{{Managename}}功能列表</div>
            
            <el-form :model="form" size="mini" label-width="55px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="标题">
                            <el-input placeholder="请输入内容" v-model="form.title" />
                        </el-form-item>                        
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="地址">
                            <el-input placeholder="请输入内容" v-model="form.address" />
                        </el-form-item>                        
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" label-width="10px">
                            <el-button type="primary" icon="el-icon-search" @click="search(true)" :loading="searchstatus">搜索</el-button>
                            <el-button type="success" icon="el-icon-edit-outline" @click="addFnmanage()">新建</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="delFn()">删除</el-button>
                            <el-button type="primary" icon="el-icon-sort" @click="sortList()">排序</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div style="height:calc(100% - 130px);overflow-y:scroll;">
                <el-table :data="tabledata" size="mini" border stripe  max-height="280px" ref="managelist" v-loading="searchstatus">
                    <el-table-column
                    type="selection"
                    width="55px" fixed="left">
                    </el-table-column>
                    <el-table-column
                        label="图标" width="60px">
                        <template slot-scope="scope">
                            <i :class="'el-icon-'+scope.row.icon"></i>
                        </template>
                    </el-table-column>                
                    <el-table-column
                        label="序号" width="70px">
                        <template slot-scope="scope">
                            {{scope.row.menuId}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="标题" width="180px">
                        <template slot-scope="scope">
                            {{scope.row.name}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="状态" width="60px">
                        <template slot-scope="scope">
                            {{getStatus(scope.row.status)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="打开方式" width="80px">
                        <template slot-scope="scope">
                            {{getOpentype(scope.row.invoketype)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="地址">
                        <template slot-scope="scope">
                            {{scope.row.menuUrl}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作" fixed="right" width="60px">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="editFnmanage(scope.row.menuId)">编辑</el-button>
                        </template>
                    </el-table-column> 
                </el-table>
            </div>
            
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.now"
            :page-sizes="page.sizes"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total" class="pagination">
            </el-pagination>
        </div>
    </el-main>
    <!--dialog-->
    <el-dialog title="功能信息详情"  :visible.sync="dialog.isVisible" width="500px" top="10vh">
        <el-form label-width="120px" size="mini">
            <el-form-item label="功能标题">
                <el-input v-model="dialog.funcname"></el-input>
            </el-form-item>
            <el-form-item label="功能地址">
                <el-select v-model="dialog.invokeentry" placeholder="请选择" style="width:100%;">
                    <el-option
                    v-for="item in select.fnaddress"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="自定义编号">
                <el-input v-model="dialog.funcno"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-select v-model="dialog.classname" placeholder="请选择" style="width:100%;">
                    <el-option
                    v-for="item in select.icons"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <i :class="'el-icon-'+item.value" style="margin-right:6px;"></i>{{item.value}}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="打开方式">
                <el-select v-model="dialog.invoketype" placeholder="请选择" style="width:100%;">
                    <el-option
                    v-for="item in select.opentype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="dialog.status" placeholder="请选择" style="width:100%;">
                    <el-option
                    v-for="item in select.states"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上级">
                <el-input v-model="dialog.parentfuncname" disabled></el-input>
            </el-form-item>
        </el-form>
        <div class="textcenter">
            <el-button type="primary" size="mini" @click="saveFn()">确定</el-button>    
            <el-button type="info" @click="dialog.isVisible = false"  size="mini">返回</el-button>  
        </div>
    </el-dialog>
</el-container>
    
</template>
<script>
import Menus from '@/components/Menus'
import {menuData} from '@/ajax/data'
import {FnManageApi} from '@/ajax'
export default {
    data(){
        return {
            suggest:'',
            form:{
                suggest:'',
                title:'',
                address:''
            },
            searchstatus:false,
            treeview:{
                checkbox:false,
                kind:'manage',
                data:menuData,
                choose:[],
                expanded:[],
                props:{
                    children: 'children',
                    label: 'name'
                }
            },
            tabledata:[],
            beforeSearchData:[],
            tablesort:true,
            page:{
              now:1,
              pagesize:10,
              sizes:[2,10, 20, 50, 100],
              total:0,
              key:''
            },
            dialog:{
                isVisible:false,
                editindex:-1,
                funcname:'',//功能标题 ; 
                invokeentry:'',//功能地址; 
                funcno:'',//自定义编号;
                classname:'menu',//图标;
                invoketype:'1',//打开方式  功能类别 = 0,URL默认调用 = 1,动态调用 = 2,静态调用 = 4,外部调用 = 8,全局窗口打开 = 16，新窗口中打开 = 32
                status:'1',//状态   1-启用  0-禁用 ;
                parentfuncid:'0',//父级id  默认0; 
                funcid:''//功能id
                ,parentfuncname:'全部功能'//fu父级name
            },
            select:{
                fnaddress:[],
                icons:[
                    {label:'',value:'menu'},
                    {label:'',value:'s-tools'},
                    {label:'',value:'setting'},
                    {label:'',value:'s-goods'},
                    {label:'',value:'goods'},
                    {label:'',value:'s-order'},
                    {label:'',value:'s-platform'},
                    {label:'',value:'s-promotion'},
                    {label:'',value:'s-grid'},                    
                    {label:'',value:'share'},
                    {label:'',value:'folder'},
                    {label:'',value:'folder-opened'},
                    {label:'',value:'folder-add'},
                    {label:'',value:'folder-remove'},
                    {label:'',value:'tickets'},
                    {label:'',value:'document-copy'},
                    {label:'',value:'document'},
                    {label:'',value:'printer'},
                    {label:'',value:'paperclip'},
                    {label:'',value:'takeaway-box'},
                    {label:'',value:'search'},
                    {label:'',value:'monitor'},
                    {label:'',value:'attract'},
                    {label:'',value:'mobile'},
                    {label:'',value:'brush'},
                    {label:'',value:'umbrella'},
                    {label:'',value:'mouse'},
                    {label:'',value:'coordinate'},
                    {label:'',value:'magic-stick'},
                    {label:'',value:'data-line'},
                    {label:'',value:'data-board'},
                    {label:'',value:'data-analysis'},
                    {label:'',value:'film'},
                    {label:'',value:'receiving'},
                    {label:'',value:'collection'},
                    {label:'',value:'bank-card'},
                    {label:'',value:'cpu'},
                    {label:'',value:'guide'},
                    {label:'',value:'message'},
                    {label:'',value:'postcard'},
                    {label:'',value:'location'},
                    {label:'',value:'location-outline'},
                    {label:'',value:'bicycle'},
                    {label:'',value:'truck'},
                    {label:'',value:'ship'},
                    {label:'',value:'light-rain'},
                    {label:'',value:'lightning'},
                    {label:'',value:'heavy-rain'},
                    {label:'',value:'cloudy'},
                    {label:'',value:'sunny'}
                ],
                opentype:[
                    //{label:"功能类别",value:'0'},
                    {label:"默认(URL调用)",value:'1'},
                    {label:"全局窗口打开",value:'16'},
                    {label:"新窗口打开",value:'32'}
                    // ,{label:"动态调用",value:'2'},
                    // {label:"静态调用",value:'4'},

                ],
                states:[
                    {label:"启用",value:'1'},
                    {label:"禁用",value:'0'}
                ]
            }
        }
    },
    components:{
        Menus
    },
    computed:{
        Managename(){
            return "[公司简介]"
        }        
    },
    watch:{
        suggest(val) {
            this.$refs.menus.filtrateList(val);
        }
    },    
    mounted(){
        this.init();
        //test
        sessionStorage.setItem("testManages",JSON.stringify(menuData))
    },
    methods:{
        init(){
            //h获取所有功能列表
            FnManageApi.getAllFnlist().then(result => {
                console.log("result",result);
                let { message, code, data } = result;
                if(code == "00000"){

                }else{
                    this.$message({
                        message: '加载功能列表异常：'+message,
                        type: 'info',
                        duration:1500
                    });
                }
            }).catch(error=>{
                this.$message({
                    message: '服务器异常，加载功能列表出错',
                    type: 'error',
                    duration:1500
                });
            });
            this.tabledata = menuData.map(item=>{
                return item;
            });
            /**test */
            this.beforeSearchData = this.tabledata;
            /**test end */

            this.treeview.data.map(item=>{
                
                if(item.menuUrl){
                    this.select.fnaddress.push({
                        label:item.menuUrl,
                        value:item.menuUrl
                    });
                }
                if(item.children && item.children.length>0){
                    item.children.map(obj=>{
                        this.select.fnaddress.push({
                            label:obj.menuUrl,
                            value:obj.menuUrl
                        });
                    })
                }
            })
        },
        
        sortList(){
            //this.$refs.managelist.sort({prop: 'menuId', order: 'descending'})
            this.tablesort = !this.tablesort;
            this.tabledata.sort((m,n)=>{
                var x = m.menuId;
                var y = n.menuId;
                if(this.tablesort){
                    return x-y
                }else{
                    return y-x
                }                
            });
            /**test */
            this.beforeSearchData = this.tabledata;
            /**test end */

        },
        getStatus(value){
            return value == "0" ? "禁用":"启用"
        },
        getOpentype(value){
            let obj={
                "0":"功能类别",
                "1":"URL调用",
                "16":"全局窗口打开",
                "32":"新窗口打开",
                "other":"URL调用"
            }
            return obj[value] || obj.other
        },
        //新增功能
        addFnmanage(){
            let len = this.tabledata.length;
            let id = parseInt(this.tabledata[len-1].menuId)+1
            this.dialog  = Object.assign({},this.dialog,{
                isVisible:true,
                editindex:-1,
                menuId:id,
                funcname:'',//功能标题 ; 
                invokeentry:'',//功能地址; 
                funcno:'',//自定义编号;
                classname:'menu',//图标;
                invoketype:'1',
                status:'1',//状态   1-启用  0-禁用 ;
                funcid:''//功能id
            });
        },
        //b编辑
        editFnmanage(menuId){
            this.tabledata.map((item,index)=>{
                if(item.menuId == menuId){
                    this.dialog  = Object.assign({},this.dialog,{
                        isVisible:true,
                        editindex:index,
                        funcname:item.name,//功能标题 ; 
                        invokeentry:item.menuUrl,//功能地址; 
                        funcno:item.menuId,//自定义编号;
                        classname:item.icon,//图标;
                        invoketype:item.invoketype || '1',
                        status:item.status || "1",//状态   1-启用  0-禁用 ;
                        funcid:item.menuId//功能id
                    });
                }
            });
        },
        saveFn(){
            let _index = this.dialog.editindex;
            let userinfo = {
                icon:this.dialog.classname,
                menuId:this.dialog.funcno,
                name:this.dialog.funcname,
                status:this.dialog.status,
                invoketype:this.dialog.invoketype,
                menuUrl:this.dialog.invokeentry
            }
            if(_index != -1){
                this.tabledata.map((item,index)=>{
                    if(index == _index){
                        //this.tabledata[_index] = userinfo;
                        this.$set(this.tabledata,index,userinfo);
                        this.$set(this.beforeSearchData,index,userinfo)
                    }
                })
            }else{
                this.tabledata.push(userinfo);
                this.beforeSearchData = arry;
            }
            this.dialog.isVisible = false;
            
        },
        delFn(){
            let arry = this.$refs.managelist.selection;
            if(arry.length == 0){
                this.$message({
                    message: '请先选中列表后再进行删除操作！',
                    type: 'info',
                    duration:1500
                });
                return;
            }
            this.$confirm('确定要删除选中的功能吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                arry.map(children=>{
                    this.tabledata.map((item,index)=>{
                        if(children.menuId == item.menuId){
                            this.tabledata.splice(index,1);
                        }
                    })
                });
                /**test */
                this.beforeSearchData = this.tabledata;
                /**test end */
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {         
            });
        },
        choosetree(a,b){
            if(a.children&&a.children.length>0){
                this.tabledata = a.children;
                this.dialog.parentfuncid = a.menuId;
                this.dialog.parentfuncname = a.name;
                /**test */
                this.beforeSearchData = this.tabledata;
                /**test end */
            }else{
                let arry = [];
                this.tabledata = [{
                    icon: a.icon,
                    menuId: a.menuId,
                    menuUrl: a.menuUrl,
                    name: a.name
                }];
                /**test */
                this.beforeSearchData = this.tabledata;
                /**test end */
                let that = this;
                this.treeview.data.map(item=>{
                    item.children.map(obj=>{
                        if(obj.menuId == a.menuId){
                            this.dialog.parentfuncid = item.menuId
                            this.dialog.parentfuncname = item.name
                        }
                    })
                })
                
            }
            
        },
        search(TYPE){

            let that = this;
            let searchData = {
            "pageNum":this.page.now,
            "pageLength":this.page.pagesize,
            "queryParam":{}
            };
            if(TYPE){
                that.searchstatus = true;
            }
            /**test */
            let title = this.form.title;
            let address = this.form.address;
            
            let newArry = [];
            this.beforeSearchData.map(item=>{
                let name = item.name || '';
                let menuUrl = item.menuUrl || '';
                if(menuUrl.indexOf(address)!= -1 && name.indexOf(title)!= -1){
                    newArry.push(item);
                }
            })
            setTimeout(()=>{
                that.tabledata = newArry;
                that.searchstatus = false;
            },500)
            return;
            /**test end*/
            if(!ispage){ 
                for(let obj in this.form){
                    if(this.form[obj] != ""){
                        searchData.queryParam[obj] = this.form[obj]
                    }
                }
            }else{
                searchData.queryParam = that.searchobj;
            }
            gogo();
            function gogo(){
                
            }
        },
        //分页
        handleSizeChange(pagesize){
            this.page.pagesize = pagesize;
            this.search(true,true);
        },
        handleCurrentChange(pageno){
            this.page.now = pageno;
            this.search(true,true);
        }
    }
    
}
</script>
<style lang="scss" scoped>
$Color:#15428F;
$Bgnavtab:rgba(255,255,255,.5);
$BgHeader:#DFE8F6;
$BorderColor:#99bbe8;
.system-hmax{
    height: 100%;
    box-sizing: border-box;
    .system-side{
        margin-top:20px;
        border: 1px solid $BorderColor;
        transition: width .5s;
        .system-side-con{
            padding:5px 10px;
            height: calc(100% - 40px);
            .system-side-scroll{
                height:calc(100% - 30px) ;
                overflow: hidden;
            }
        }
    }
    .system-wide{
        //margin-left:10px;
        border: 1px solid $BorderColor;
        position: relative;
        box-sizing: border-box;
        height:100%;
        .system-wide-table{
            padding: 0 5px;
        }
    }
    .system-title{line-height: 30px;background-color: #deecfd;padding:0 10px;color:$Color; }
    .pagination{
        position: absolute;left:0;bottom:10px;padding:0 10px;
    }
}
</style>